<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令使用</title>
    <style>
        .box{
            width: 300px;
            height: 200px;border: 1px solid red;
            background-color: yellowgreen;
        }
        /* div button {
            width: 100px;
            height: 100px;
            font-size: 30px;
            border: 1px solid whitesmoke;
            border-radius: 10px;
        } */
        .box2 {
            width: 200px;
            height: 300px;
            border: 3px solid whitesmoke;
            border-radius: 10px;
            background-color: beige;
        }
        .box2 h2 {
            padding: auto;
            padding-left: 52px;
        }
        .box2 button {
            padding-left: 15px;
            padding-right: 14px;
            padding-top: 15px;
            margin: 16px 31px;
            width: 137px;
        }
    </style>
</head>
<body>
    <div id="app">  
        <!-- //v-show的使用 -->
        <!-- <div v-show="flag1" class="box">我是一个盒子</div>      -->
        <!-- //v-html -->
        <!-- <div v-html="msg"></div> -->
        <!-- v-if  v-else  v-else-if 的使用 -->
        <!-- <div v-if="gender===1">性别：男</div>
        <div v-else>性别：女</div>
        <div v-if="sorce>=90">奖励三亚七天旅行</div>
        <div v-else-if="sorce>=80">奖励北京双日游</div>
        <div v-else-if="sorce>=70">奖励零食大礼包</div>
        <div v-else-if="sorce>=60">没有奖励</div>
        <div v-else>惩罚当一周值日生</div>
        -->
        <!-- //v-on的使用 -->
        <!-- 1. v-on：事件名="内联语句" -->
        <!--2. v-on：事件名="methods中的函数名"  -->
        <!-- 3.v-on调用参数：事件名="methods中的函数名(参数1,参数2,参数n)" -->
        <!-- 1. v-on：事件名="内联语句" -->

        <!-- <button v-on:click="count++">+</button>//可以简写成：<button @click="count++">+</button> -->         
        <!-- <button @click="count++">+</button>
        <span>{{count}}</span>
        <button @click="count--">-</button> -->
        <!-- <button v-on:click="count--">-</button>//可以简写成：<button @click="count--">+</button> -->
        
        <!--2. v-on：事件名="methods中的函数名"  -->
        <!-- <button  @click="fn" style="width: 200px; height: 200px;">显示or隐藏</button>
        <h1 v-show="bool">冰瓜、烧烤、白啤</h1> -->
    
        <!-- 3.v-on调用参数：事件名="methods中的函数名(参数1,参数2,参数n)" -->
        <div class="box2">
            <h2>购买案例</h2>
            <button @click="buy(3)">可乐三元一瓶</button>
            <button @click="buy(5)">牛奶五元一瓶</button>
            <button>剩余余额{{money}}元</button>
        </div>


        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                msg:`<a href="https://v2.cn.vuejs.org/" target="_blant">Vue官网</a>`,
                flag1:true,//显示盒子
                flag2:false,//隐藏盒子
                gender:2,
                sorce:33,
                count:100,
                bool:true,
                money:100,

            },
            methods:{
                fn(){
                    app.bool=!app.bool
                    console.log(1);

                },
                buy(price){
                    this.money-=price
                }
            }
        })
    </script>
</body>
</html>
